<template>
  <div class="videobox">
    <div id="mse" style="height: 100%;"></div>
  </div>
</template>

<script>
import Player from 'xgplayer'
export default {
    props: {
        width: {
            type: Number,
            require: false,
            default: 900
        },
        height: {
            type: Number,
            require: false,
            default: 500
        },
        autoplay: true,
        loop: true
    },
    data() {
        return {
            videoPlayer: null
        }
    },
    methods: {
        initVideoPlayer(source, config) {
            console.log('初始化播放器', config)
            this.destroy()
            this.$nextTick(() => {
                const playerConfig = {
                    id: 'mse',
                    url: source,
                    fluid: true,
                    height: 500,
                    width:  900,
                    volume: 1
                }
                if (config.disableProgress) {
                    // playerConfig.disableProgress = true
                    playerConfig.allowSeekPlayed = true
                }
                this.videoPlayer = new Player(playerConfig)
            })
        },
        play(source, config) {
            this.initVideoPlayer(source, config)
        },
        // 销毁
        destroy() {
            if (this.videoPlayer) {
                this.videoPlayer.destroy(false) 
                this.videoPlayer = null
            }
        }
    }
}
</script>

<style>

</style>